<template>
	<view class="content">
		<zl-navbar title="添加课程" :txt-color="'#000'" bg-color="transparent" :isShowLeft="true"></zl-navbar>
		<view class="bottom">
			<view class="input-line">
				<view class="label">课程名称:</view>
				<view class="input">
					<input type="text" v-model="form.courseName">
				</view>
			</view>

			<view class="input-line">
				<view class="label">课程描述:</view>
				<view class="input">
					<input type="text" v-model="form.courseDesc">
				</view>
			</view>

			<view class="input-line">
				<view class="label">课程封面:</view>
				<view v-if="!form.courseCoverColor" @click="openPop" class="add-box">
					<u-icon name="plus" size="24" color="#F582AE"></u-icon>
					<view style="margin-top: 1vh;">选择封面</view>
				</view>
				<image @click="openPop" class="select-image" v-if="form.courseCoverColor" :src="form.courseCoverColor"
					mode="aspectFill"></image>
			</view>

			<view style="width: 60vw;margin: 0 auto;">
				<u-button @click="submit" shape="circle" text="提交" color="#F582AE"></u-button>
			</view>
		</view>





		<u-popup :show="isImageBoxShow" @close="isImageBoxShow = false" @open="open" closeOnClickOverlay round="16">
			<view class="cover-image-box">
				<view @click="selectCoverImage(item,index)" v-for="(item,index) in list" class="cover-image">
					<image :src="item.url" mode="aspectFill"></image>
					<view>{{item.coverName}}</view>
				</view>
			</view>
		</u-popup>
		
		


	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		addCourse,
		editCourse,
		getCoverImage,
		getCourseDetail
	} from "@/utils/api.js"
	import {
		onLoad,
	} from '@dcloudio/uni-app'


	onLoad(async (option) => { //onShow重新加载一次列表
		console.log(option);
		if (option.courseId) {
			let res = await getCourseDetail(option.courseId)
			form.value = res.data
		}
	})



	const isImageBoxShow = ref(false) //图库弹窗是否显示

	const list = ref([]) //封面图库

	async function getList() {
		let res = await getCoverImage()
		console.log(res);
		list.value = res.rows
	}

	function openPop() {
		getList()
		isImageBoxShow.value = true
	}



	let form = ref({
		courseName: "", //课程名称
		courseCoverColor: "",
		courseDesc: "" //课程描述
	}) //要提交的课程对象



	const currentImageIndex = ref(null) //当前选择的图片序号

	//选择封面图
	function selectCoverImage(item, index) {
		currentImageIndex.value = index
		form.value.courseCoverColor = item.url
		isImageBoxShow.value = false
	}

	//提交
	async function submit() {
		let res
		if (form.value.courseId) {
			res = await editCourse(form.value)
		} else {
			res = await addCourse(form.value)
		}
		if (res.code == 200) {
			uni.switchTab({
				url: "/pages/course/course"
			})
		}

	}
</script>

<style scoped lang="scss">
	page {
		background-color: #FEF6E4;
		font-size: 4vw;
		padding-bottom: 3vh;
	}

	.bottom {
		margin: 0 4vw;
		margin-top: 3vh;

		.input-line {
			margin-bottom: 4vh;

			.label {
				color: #F582AE;
				margin-bottom: 1vh;
			}

			.input {
				width: 100%;
				background: rgba(255, 255, 255, .8);
				border: 2rpx solid #F582AE;
				padding: 1.3vh 3vw;
				box-sizing: border-box;
				border-radius: 15rpx;
			}

			.add-box {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-width: 10rpx;
				border: 5rpx dotted #F582AE;
				width: 300rpx;
				height: 22vh;
				border-radius: 16rpx;
				background-color: rgba(255, 255, 255, .6);
				border-spacing: 10px;
			}

			.select-image {
				width: 280rpx;
				height: 22vh;
			}
		}
	}

	.cover-image-box {
		padding-top: 2vh;
		display: flex;
		flex-wrap: wrap;
		height: 40vh;
		overflow: auto;

		.cover-image {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			margin: 1vh 0;
			width: 33vw;

			image {
				box-shadow: 2rpx 2rpx 12rpx 0rpx rgba(95, 95, 95, 0.1);
				width: 25vw;
				height: 15vh;
				margin-bottom: 0.5vh;
			}
		}
	}
</style>